<template>
   <van-icon :color="value===1 ? '#3296fa':'#777'"  @click="onLike" :loading="loading" :name="value===1 ?'good-job':'good-job-o'" />
</template>
<script>
import { AddLikingsArticle,DeleteLikingsArticle } from "@/api/article"
export default {
    name:"LikeArticle",
    data(){
        return{
            loading:false
        }
    },
    props:{
        value:{
            type:Number,
            // required:true
        },
        articleId:{
            type:[String,Number,Object],
            required:true
        }
    },
    methods:{
         // 添加、取消收藏
        async onLike(){
            this.loading = true
            try {
                let status = -1;
                if(this.value!==1){
                    // 点赞
                    await AddLikingsArticle(this.articleId)
                    status = 1
                }else{
                    // 取消点赞
                    await DeleteLikingsArticle(this.articleId)
                }
                //更新视图
                this.$emit('input',status)
                // 提示框
                this.$toast.success(status===1 ? '点赞成功':'取消点赞')
            } catch (error) {
                this.$toast('操作失败，稍后重试')
            }
            this.loading = false
        }
    },
    components:{}
}
</script>
<style scoped>
</style>